<template>
  <el-drawer v-model="drawerValue" size="500px" class="knowledge-edit-drawer">
    <template #header>
      <div class="drawer-header">
        <div class="header-icon">
          <Icon icon="ep:edit" />
        </div>
        <div class="header-content">
          <h3 class="drawer-title">编辑知识节点</h3>
          <p class="drawer-subtitle">修改知识库内容和语音设置</p>
        </div>
      </div>
    </template>

    <template #default>
      <!-- 标签页切换 -->
      <div class="tab-container">
        <div class="tab-header">
          <div class="tab-item" @click="activeName = 0" :class="{ active: activeName === 0 }">
            <Icon icon="ep:info-filled" class="tab-icon" />
            <span>基础信息</span>
          </div>
          <div class="tab-item" @click="activeName = 1" :class="{ active: activeName === 1 }">
            <Icon icon="ep:microphone" class="tab-icon" />
            <span>回答语音</span>
          </div>
        </div>
      </div>

      <!-- 基础信息标签页 -->
      <div class="tab-content" v-if="activeName === 0">
        <div class="form-section">
          <el-form
            ref="formRef"
            :model="formData"
            label-width="120px"
            :rules="rules"
            class="edit-form"
          >
            <div class="section-title">
              <Icon icon="ep:info-filled" class="section-icon" />
              基础信息
            </div>

            <el-form-item label="标题" prop="title" class="form-item">
              <el-input
                v-model="formData.title"
                placeholder="请输入标题"
                class="enhanced-input"
                maxlength="100"
                show-word-limit
              >
                <template #prefix>
                  <Icon icon="ep:edit-pen" />
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="问题类型" prop="knowledgeType" class="form-item">
              <el-radio-group v-model="formData.knowledgeType" class="type-radio-group">
                <div class="radio-wrapper">
                  <el-radio :label="1" class="type-radio">
                    <div class="radio-content">
                      <Icon icon="ep:question-filled" class="radio-icon" />
                      <div class="radio-text">
                        <span class="radio-title">一般问题</span>
                        <span class="radio-desc">常见的通用问题</span>
                      </div>
                    </div>
                  </el-radio>
                </div>

                <div class="radio-wrapper">
                  <el-radio :label="2" class="type-radio">
                    <div class="radio-content">
                      <Icon icon="ep:briefcase" class="radio-icon" />
                      <div class="radio-text">
                        <span class="radio-title">业务问题</span>
                        <span class="radio-desc">业务相关的专业问题</span>
                      </div>
                    </div>
                  </el-radio>
                </div>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="标签名称" class="form-item">
              <el-input
                v-model="formData.labelName"
                placeholder="请输入标签名称"
                class="enhanced-input"
              >
                <template #prefix>
                  <Icon icon="ep:price-tag" />
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="关键字" prop="keys" class="form-item">
              <el-input
                v-model="formData.keys"
                type="textarea"
                placeholder="请输入关键字(,逗号隔开)"
                :rows="3"
                class="enhanced-textarea"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>

            <div class="section-title">
              <Icon icon="ep:guide" class="section-icon" />
              跳转设置
            </div>

            <el-form-item label="跳转到" prop="jumpType" class="form-item">
              <el-select
                v-model="formData.jumpType"
                placeholder="请选择大模型跳转到"
                class="enhanced-select"
              >
                <template #prefix>
                  <Icon icon="ep:position" />
                </template>
                <el-option
                  v-for="item in jumpTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                  <div class="option-content">
                    <Icon :icon="getJumpTypeIcon(item.value)" class="option-icon" />
                    <span>{{ item.label }}</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="坐席班组"
              v-if="formData.jumpType == 5"
              prop="jumpIndex"
              class="form-item"
            >
              <el-select
                v-model="formData.jumpIndex"
                placeholder="请选择坐席班组"
                class="enhanced-select"
              >
                <template #prefix>
                  <Icon icon="ep:user-filled" />
                </template>
                <el-option
                  v-for="item in agentOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.skillId"
                >
                  <div class="option-content">
                    <Icon icon="ep:user" class="option-icon" />
                    <span>{{ item.name }}</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="节点"
              v-if="formData.jumpType == 4"
              prop="jumpIndex"
              class="form-item"
            >
              <el-select
                v-model="formData.jumpIndex"
                placeholder="请选择要跳转的节点"
                class="enhanced-select"
              >
                <template #prefix>
                  <Icon icon="ep:connection" />
                </template>
                <el-option
                  v-for="item in ivrOption"
                  :disabled="item.disabled"
                  :key="item.id"
                  :label="item.properties.name"
                  :value="item.id"
                >
                  <div class="option-content">
                    <Icon icon="ep:connection" class="option-icon" />
                    <span>{{ item.properties.name }}</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="播放次数" class="form-item">
              <div class="play-count-wrapper">
                <el-input-number
                  v-model="formData.continuousPlayNum"
                  :min="1"
                  :max="100"
                  class="play-count-input"
                />
                <span class="input-suffix">次</span>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 回答语音标签页 -->
      <div class="tab-content" v-else>
        <div class="voice-section">
          <div class="section-header">
            <div class="section-title">
              <Icon icon="ep:microphone" class="section-icon" />
              语音文件管理
            </div>
            <el-button type="primary" @click="openFrom('create')" class="add-voice-btn">
              <Icon icon="ep:plus" class="btn-icon" />
              新增语音
            </el-button>
          </div>

          <div class="voice-table-container">
            <el-table :data="list" class="voice-table">
              <el-table-column
                prop="recordDescription"
                label="语音描述"
                show-overflow-tooltip
                min-width="150"
              >
                <template #default="scope">
                  <div class="desc-cell">
                    <Icon icon="ep:document" class="desc-icon" />
                    <span>{{ scope.row.recordDescription }}</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                prop="recordPath"
                label="文件地址"
                show-overflow-tooltip
                min-width="200"
              >
                <template #default="scope">
                  <div class="path-cell">
                    <Icon icon="ep:link" class="path-icon" />
                    <span class="path-text">{{ scope.row.recordPath }}</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="操作" align="center" width="150">
                <template #default="scope">
                  <div class="action-buttons">
                    <el-button
                      type="primary"
                      text
                      @click="openFrom('update', scope.row)"
                      class="action-btn"
                    >
                      <Icon icon="ep:edit" class="btn-icon" />
                      编辑
                    </el-button>
                    <el-button
                      type="danger"
                      text
                      @click="delVoice(scope.row.id)"
                      class="action-btn"
                    >
                      <Icon icon="ep:delete" class="btn-icon" />
                      删除
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <div class="pagination-wrapper">
              <Pagination
                :total="total"
                v-model:page="queryParams.pageNo"
                v-model:limit="queryParams.pageSize"
                @pagination="getVoicePage"
              />
            </div>
          </div>
        </div>
      </div>
    </template>

    <template #footer>
      <div class="drawer-footer">
        <el-button @click="cancelClick" class="cancel-btn">
          <Icon icon="ep:close" class="btn-icon" />
          取消
        </el-button>
        <el-button type="primary" :disabled="formLoading" @click="confirmClick(1)" class="save-btn">
          <Icon icon="ep:check" class="btn-icon" />
          保存
        </el-button>
        <el-button
          type="warning"
          :disabled="formLoading"
          v-if="formData.type != 1"
          @click="confirmClick(2)"
          class="default-btn"
        >
          <Icon icon="ep:star" class="btn-icon" />
          转为默认
        </el-button>
      </div>
    </template>
  </el-drawer>

  <!-- 语音编辑弹窗 -->
  <Dialog v-model="voiceDialog" :title="voiceDialogTitle" width="500px" class="voice-dialog">
    <div class="voice-form-container">
      <el-form
        ref="voiceRefs"
        :model="formVoice"
        label-width="80px"
        :rules="voiceRule"
        class="voice-form"
      >
        <el-form-item label="语音文件" prop="file" class="form-item">
          <UploadFile
            v-model="formVoice.file"
            :file-type="['mp3', 'wav']"
            :limit="1"
            :file-size="10"
            class="upload-component"
          />
          <div class="upload-tip">
            <Icon icon="ep:info-filled" class="tip-icon" />
            <span>支持 MP3、WAV 格式，文件大小不超过 10MB</span>
          </div>
        </el-form-item>

        <el-form-item label="语音描述" class="form-item">
          <el-input
            type="textarea"
            v-model="formVoice.recordDescription"
            placeholder="请输入语音文件描述"
            :rows="3"
            class="enhanced-textarea"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="voice-dialog-footer">
        <el-button @click="voiceDialog = false" class="cancel-btn">
          <Icon icon="ep:close" class="btn-icon" />
          取消
        </el-button>
        <el-button
          type="primary"
          :disabled="btnLoading"
          :loading="btnLoading"
          @click="submit"
          class="submit-btn"
        >
          <Icon icon="ep:check" class="btn-icon" />
          {{ btnLoading ? '保存中...' : '确定' }}
        </el-button>
      </div>
    </template>
  </Dialog>
</template>

<script setup>
import * as ivrKnowApi from '@/api/call/ivr/index.ts'
import * as LevelApi from '@/api/crm/customerTagConfig'
import { merge } from 'lodash-es'
import { getIvrList } from '@/api/call/ivr'
import { skillSimple } from '@/api/call/agent'
import { useIvrStore } from '@/store/modules/ivr'

defineOptions({ name: 'EditKnowledgeForm' })

const useStore = useIvrStore()
const voiceDialog = ref(false)
const drawerValue = ref(false)
const activeName = ref(0)
const listId = ref('')
const formLoading = ref(false)
const btnLoading = ref(false)
const formRef = ref(null)
const voiceRefs = ref(null)
const total = ref(0)
const list = ref([])
const voiceType = ref('')
const voiceItem = ref('')

const voiceDialogTitle = computed(() => {
  return voiceType.value === 'create' ? '新增语音' : '编辑语音'
})

const formData = reactive({
  groupId: '',
  knowledgeGroupId: '',
  title: '',
  knowledgeType: '',
  labelName: '',
  keys: '',
  jumpType: '',
  jumpIndex: '',
  ignoreSilence: '',
  isSetGrade: '',
  isSendSms: '',
  smsId: '',
  continuousPlayNum: ''
})

const formVoice = reactive({
  file: '',
  recordDescription: ''
})

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  groupId: '',
  issueId: ''
})

const jumpTypeOptions = [
  { label: '挂机', value: 1 },
  { label: '等待用户应答', value: 2 },
  { label: '下一个主流程', value: 3 },
  { label: '指定节点', value: 4 },
  { label: '转人工', value: 5 },
  { label: '上一个主流程', value: 6 }
]

const levelOptions = ref([])
const agentOptions = ref([])
const ivrOption = ref([])

const rules = reactive({
  title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
  keys: [{ required: true, message: '关键词不能为空', trigger: 'blur' }],
  knowledgeType: [{ required: true, message: '请选择问题类型', trigger: 'change' }],
  jumpType: [{ required: true, message: '请选择大模型跳转到', trigger: 'change' }],
  jumpIndex: [{ required: true, message: '请选择', trigger: 'change' }]
})

const voiceRule = reactive({
  file: [{ required: true, message: '请上传文件', trigger: 'change' }]
})

const emit = defineEmits(['success'])

// 获取跳转类型图标
const getJumpTypeIcon = (type) => {
  const iconMap = {
    1: 'ep:phone',
    2: 'ep:timer',
    3: 'ep:right',
    4: 'ep:connection',
    5: 'ep:user',
    6: 'ep:back'
  }
  return iconMap[type] || 'ep:position'
}

// 打开编辑弹窗
const open = async (id) => {
  listId.value = id
  agentOptions.value = await skillSimple()
  getDetail()
  drawerValue.value = true
  levelOptions.value = await LevelApi.getLevelSimple()
}

// 获取详情
const getDetail = async () => {
  const data = await ivrKnowApi.getKnowLedge(listId.value)
  if (data.jumpIndex)
    data.jumpIndex = Number(data.jumpIndex) ? Number(data.jumpIndex) : data.jumpIndex
  await merge(formData, data)
  queryParams.groupId = formData.groupId
  queryParams.issueId = formData.id
  getIvrOption()
  getVoicePage()
}

// 取消
const cancelClick = () => {
  drawerValue.value = false
}

// 确定
const confirmClick = async (val) => {
  if (activeName.value === 0) {
    try {
      await formRef.value.validate()
      formLoading.value = true
      if (val === 1) {
        await ivrKnowApi.updateIvrKnow(formData)
      } else {
        await ivrKnowApi.updateType(formData)
      }
      emit('success')
      ElMessage.success('操作成功')
      drawerValue.value = false
    } finally {
      formLoading.value = false
    }
  } else {
    drawerValue.value = false
  }
}

// 获取IVR选项
const getIvrOption = async () => {
  ivrOption.value = useStore.getLf.getGraphData().nodes
}

// 获得知识库语音分页
const getVoicePage = async () => {
  const data = await ivrKnowApi.getKnowVoicePage(queryParams)
  list.value = data.list
  total.value = data.total
}

// 新增/编辑语音
const openFrom = (type, item) => {
  voiceType.value = type
  voiceItem.value = item
  if (type === 'create') {
    formVoice.file = ''
    formVoice.recordDescription = ''
  } else {
    formVoice.file = item.recordPath
    formVoice.recordDescription = item.recordDescription
  }
  voiceDialog.value = true

  // 重置表单验证
  nextTick(() => {
    voiceRefs.value?.clearValidate()
  })
}

// 提交语音表单
const submit = async () => {
  try {
    await voiceRefs.value.validate()
    btnLoading.value = true

    const obj = {
      recordPath: formVoice.file,
      groupId: formData.groupId,
      issueId: formData.id,
      recordDescription: formVoice.recordDescription
    }

    if (voiceType.value === 'create') {
      await ivrKnowApi.createIvrKnowVoice(obj)
    } else {
      obj.id = voiceItem.value.id
      await ivrKnowApi.updateKnowVoice(obj)
    }

    ElMessage.success('操作成功')
    voiceDialog.value = false
    getVoicePage()
  } catch (error) {
    console.error('语音操作失败:', error)
    if (error !== 'validation failed') {
      ElMessage.error('操作失败，请重试')
    }
  } finally {
    btnLoading.value = false
  }
}

// 删除语音
const delVoice = async (id) => {
  await ElMessageBox.confirm('确定要删除此项数据吗？', '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await ivrKnowApi.deleteKnowVoice(id)
  ElMessage.success('删除成功')
  getVoicePage()
}

defineExpose({ open })
</script>

<style lang="scss" scoped>
.knowledge-edit-drawer {
  :deep(.el-drawer) {
    border-radius: 16px 0 0 16px;
  }

  :deep(.el-drawer__header) {
    margin-bottom: 0;
    padding: 0;
    border-bottom: 1px solid rgba(0, 82, 204, 0.1);
  }

  :deep(.el-drawer__body) {
    padding: 0;
  }

  :deep(.el-drawer__footer) {
    padding: 0;
  }
}

.drawer-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  color: white;
}

.header-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.header-content {
  flex: 1;
}

.drawer-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.drawer-subtitle {
  font-size: 14px;
  margin: 0;
  opacity: 0.9;
}

.tab-container {
  background: white;
  border-bottom: 1px solid rgba(0, 82, 204, 0.1);
}

.tab-header {
  display: flex;
  padding: 0 24px;
}

.tab-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
  color: #6b7280;
  font-weight: 500;

  &:hover {
    color: #0052cc;
    background: rgba(0, 82, 204, 0.02);
  }

  &.active {
    color: #0052cc;
    border-bottom-color: #0052cc;
    background: rgba(0, 82, 204, 0.05);
  }
}

.tab-icon {
  font-size: 16px;
}

.tab-content {
  padding: 24px;
  background: #f8fafc;
  min-height: 500px;
}

.form-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(0, 82, 204, 0.1);
}

.section-icon {
  color: #0052cc;
  font-size: 18px;
}

.edit-form {
  :deep(.el-form-item__label) {
    font-weight: 500;
    color: #374151;
  }
}

.form-item {
  margin-bottom: 24px;

  &:last-child {
    margin-bottom: 0;
  }
}

.enhanced-input,
.enhanced-select {
  :deep(.el-input__wrapper) {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &.is-focus {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
    }
  }
}

.enhanced-textarea {
  :deep(.el-textarea__inner) {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &:focus {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
    }
  }
}

.type-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.radio-wrapper {
  width: 180px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;

  &:hover {
    border-color: #0052cc;
    background: rgba(0, 82, 204, 0.02);
  }

  &:has(.el-radio.is-checked) {
    border-color: #0052cc;
    background: rgba(0, 82, 204, 0.05);
  }
}

.type-radio {
  margin: 0;
  width: 100%;

  :deep(.el-radio__input) {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  :deep(.el-radio__label) {
    padding: 0;
    width: 100%;
  }
}

.radio-content {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.radio-icon {
  font-size: 20px;
  color: #6b7280;
  transition: color 0.2s ease;
}

.radio-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.radio-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  transition: color 0.2s ease;
}

.radio-desc {
  font-size: 12px;
  color: #6b7280;
}

.option-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.option-icon {
  font-size: 14px;
  color: #6b7280;
}

.play-count-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.play-count-input {
  width: 120px;
}

.input-suffix {
  color: #6b7280;
  font-size: 14px;
}

.voice-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.add-voice-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;

  .btn-icon {
    margin-right: 6px;
  }
}

.voice-table-container {
  border-radius: 8px;
  overflow: hidden;
}

.voice-table {
  :deep(.el-table__header) {
    background: rgba(0, 82, 204, 0.02);
  }

  :deep(.el-table__header th) {
    background: transparent;
    border-bottom: 1px solid rgba(0, 82, 204, 0.1);
    color: #374151;
    font-weight: 600;
  }

  :deep(.el-table__body tr:hover) {
    background: rgba(0, 82, 204, 0.02);
  }
}

.desc-cell,
.path-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.desc-icon,
.path-icon {
  color: #6b7280;
  font-size: 14px;
  flex-shrink: 0;
}

.path-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.action-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;

  .btn-icon {
    margin-right: 4px;
    font-size: 12px;
  }
}

.pagination-wrapper {
  padding: 16px 0;
  display: flex;
  justify-content: center;
}

.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  background: white;
  border-top: 1px solid rgba(0, 82, 204, 0.1);
}

.cancel-btn {
  border: 2px solid #e5e7eb;
  color: #6b7280;
  border-radius: 8px;

  &:hover {
    border-color: #d1d5db;
    color: #374151;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

.save-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;

  .btn-icon {
    margin-right: 6px;
  }
}

.default-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  border-radius: 8px;

  .btn-icon {
    margin-right: 6px;
  }
}

.voice-dialog {
  :deep(.el-dialog) {
    border-radius: 16px;
  }
}

.voice-form-container {
  padding: 20px 0;
}

.voice-form {
  :deep(.el-form-item__label) {
    font-weight: 500;
    color: #374151;
  }
}

.upload-component {
  width: 100%;
}

.upload-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(0, 82, 204, 0.05);
  border-radius: 6px;
  font-size: 12px;
  color: #6b7280;
}

.tip-icon {
  color: #0052cc;
  font-size: 14px;
}

.voice-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.submit-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;

  .btn-icon {
    margin-right: 6px;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .knowledge-edit-drawer {
    :deep(.el-drawer) {
      width: 100% !important;
    }
  }

  .tab-header {
    padding: 0 16px;
  }

  .tab-content {
    padding: 16px;
  }

  .form-section,
  .voice-section {
    padding: 16px;
  }

  .drawer-footer {
    flex-direction: column;
    gap: 8px;
  }

  .cancel-btn,
  .save-btn,
  .default-btn {
    width: 100%;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .tab-content {
    background: #1f2937;
  }

  .form-section,
  .voice-section {
    background: #374151;
  }

  .section-title {
    color: #f9fafb;
  }

  .radio-title {
    color: #e5e7eb;
  }

  .radio-desc {
    color: #d1d5db;
  }
}
</style>
